<template>
    <customNavigationBar title="更换帮手">
        <template #right>
            <view class="search">
                <image src="/static/common/icon_search.png" class=""></image>
            </view>
        </template>
    </customNavigationBar>

    <view class="page">
        <view class="items">
            <template v-for="item in orderList.records" :key="item.userId">
                <view class="item" v-if="item.userId != riderId">
                    <view class="avatar">
                        <image :src="item.avatarUrl" mode="aspectFill"></image>
                    </view>

                    <view class="infomation">
                        <view class="top">
                            <span>{{ item.riderName }}</span>
                            <span>帮手电话：{{ item.phone }}</span>
                        </view>
                        <view class="addressBox">
                            <!-- <view class="address">帮手小区：四川省成都市金牛区某某某街道营门口小区</view> -->
                            <view class="button" @click="change(item)">确认更换</view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { homeApis } from '@/utils/apis';
const change = async (item) => {
    uni.showModal({
        title: '是否确认更换',
        success(res) {
            if (res.confirm) {
                uni.showLoading({
                    mask: true
                });

                homeApis
                    .RiderOrderUpdate({
                        orderNo: orderId.value,
                        riderId: item.riderId
                    })
                    .then(() => {
                        uni.$emit('changeHelperSuccess');
                        uni.navigateBack();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: 'none',
                            title: err
                        });
                    });
            }
        }
    });
};
const riderId = ref();
const orderId = ref();
onLoad((e) => {
    riderId.value = e.id;
    orderId.value = e.id;
    getOrderList();
});
onReachBottom(() => {
    if (pageParams.value.current < orderList.value.pages) {
        pageParams.value.current++;
        getOrderList();
    }
});

const pageParams = ref({
    current: 1,
    size: 10
});
const orderList = ref({});
const getOrderList = async () => {
    let res = await homeApis.getBSList({ ...pageParams.value });

    if (res.data.current == 1) {
        orderList.value = res.data;
    } else {
        if (orderList.value.current != res.data.current) {
            let records = [...orderList.value.records, ...res.data.records];
            orderList.value = { ...res.data, records };
        }
    }
};
</script>
<style>
page {
    background: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.search {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
        width: 40rpx;
        height: 40rpx;
    }
}

.page {
    padding: 20rpx 24rpx;
    padding-bottom: calc(60rpx + env(safe-area-inset-bottom));

    .items {
        width: 100%;
        .item {
            padding: 24rpx 24rpx 30rpx;
            display: flex;
            gap: 28rpx;
            background-color: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            .avatar {
                width: 126rpx;
                height: 126rpx;
                background: #e4e4e6;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 126rpx;
                    height: 126rpx;
                }
            }
            .infomation {
                flex: 1;
                .top {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 24rpx;
                    color: #333333;
                    margin-bottom: 30rpx;
                }
                .addressBox {
                    display: flex;
                    justify-content: space-between;
                    gap: 14rpx;
                    .address {
                        flex: 1;
                        font-size: 24rpx;
                        color: #333333;
                        line-height: 36rpx;
                        text-align: left;
                    }
                    .button {
                        width: 172rpx;
                        height: 62rpx;
                        background: #2c72ff;
                        border-radius: 34rpx;
                        font-size: 24rpx;
                        color: #ffffff;
                        line-height: 62rpx;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
